<!DOCTYPE html>
<html lang="cn">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>原生手机坐标与平台定位对比</title>
		<meta name="viewport" content="initial-scale=1.0,
 maximum-scale=1.0, user-scalable=no"	/>
	</head>
	<body>
		<!--系统  -->
		<div>
			<h2>定位比较</h2>
			<ul>
				<li><label>系统经纬度：</label><label id="lng_lat_sys"></label></li>
				<li><label>百度经纬度：</label><label id="lng_lat_baidu"></label></li>
				<li><label>高德经纬度：</label><label id="lng_lat_gaode"></label></li>
			</ul>
		</div>
		<h3>系统坐标</h3>
		<div style="background: coral;"><label>是否支持系统定位功能：</lable><label id="msg"></label>
	
			<div >
				<label>经纬度位置：</label><a id="lng_lat_sys2" style="color: darkblue;"></a>
				<button onclick="copyTextsys()" style="background-color: #0fe352;font-size: medium;">复制经纬度</button>
			</div>
			
			<!-- <label>详细参数：</lable> -->
			<p  id="content" style="color:rgb(46, 8, 235)"></p>
			<p  id="error_info" style="color: crimson;"></p>
			<!-- <p id="shuoming" style="color:rgb(46, 8, 235)"></p> -->
		</div>
		<!-- 百度 -->
		<div class="baidu_lng_lat" style="background-color:aqua;">
			<h3>百度坐标</h3>
			<div>当前位置：</div>
			<div id="lng_lat_baidu2"></div>
			<div><label>status码：</label><p id="status"></p></div>
			<div><label>定位精度：</label><p id="jingdu"></p></div>
			<div>
			  <button onclick="copyTextbaidu()">复制经纬度</button>
			</div>
		  </div>
		<!-- 百度 -->
		<!-- 高德地图 -->
			<div style ="background-color:gold;">
				<div class="info"  >
				<h4 id='status'></h4><hr>
				<p id='result'></p><hr>
				<label>定位结果：</label><label id="lng_lat_gaode2"></label><br>
				<button onclick="copyTextgaode()">复制经纬度</button>
				<p >由于众多浏览器已不再支持非安全域的定位请求，为保位成功率和精度，请升级您的站点到HTTPS。</p>
			</div>
		  </div>
		  <!-- 高德 -->
		</div>
		
		<!--  -->
		<div id="container" style="width:100%;height:600px;"></div>
		<div id="map" style="width:100%;height:600px;"></div>
		
	</body>
	
 	<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=cdMxf0WbUbcE8s7mGGoOq1tXuSbGCdVC"></script>
	 <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=f0ff272f29b9084cf90d5b0718a8154b"></script>
	 <!-- /////////系统////////////// -->
	<script type="text/javascript">
				///////////////////////系统经纬度获取/////////////////////点击按钮获取地理位置信息
      //getCurrentPosition与定时器setInterval类似多次请求，因为位置需要不间断的获取
      //直接navigator.geolocation表示单次获取位置
      navigator.geolocation.getCurrentPosition(function (position) {
		document.getElementById("msg").innerHTML = "支持";
		str=position.coords.longitude+","+position.coords.latitude;
		document.getElementById("lng_lat_sys").innerHTML = str;
		document.getElementById("lng_lat_sys2").innerHTML = str;
        var position_msg = "其他参数：<br>";
        position_msg += "准确度：	" + position.coords.accuracy + "<br>";
        position_msg += "海拔：	" + position.coords.altitude + "<br>";
        position_msg += "海拔准确度：	" + position.coords.altitudeAcuracy + "<br>";
        position_msg += "行进方向：	" + position.coords.heading + "<br>";
        position_msg += "地面速度：	" + position.coords.speed + "<br>";
        position_msg += "请求的时间：	" + new Date(position.timestamp) + "<br>";
		document.getElementById("content").innerHTML = position_msg;
      }, function (err) {
		document.getElementById("msg").innerHTML = "不支持";
        // alert("code：返回获取位置的状态："+err.code);
		var error_msg = "code:"+err.code;
		switch (err.code) { 
			case 0:error_msg += "不包括其他错误编号中的未知错误"; 
			break; 
			case 1:error_msg += "用户拒绝浏览器获取位置信息"; 
			break; 
			case 2:error_msg += "尝试获取用户信息，但失败了"; 
			break; 
			case 3:error_msg += "设置了timeout值，获取位置超时了"; 
			break; 
		}
		// var error_shuoming = "<p>返回获取位置的状态："
		// 	+"<p>0  :  不包括其他错误编号中的错误</p>"
		// 	+"<p>1  :  用户拒绝浏览器获取位置信息</p>"
		// 	+"<p>2  :  尝试获取用户信息，但失败了</p>"
		// 	+"<p>3  :   设置了timeout值，获取位置超时了</p>"

		document.getElementById("error_info").innerHTML = error_msg;
		// document.getElementById("shuoming").innerHTML = error_shuoming;
      }, {
          enableHighAcuracy: false, //位置是否精确获取
          timeout: 5000,            //获取位置允许的最长时间
          maximumAge: 1000          //多久更新获取一次位置
        })
		//////////////////////////////////////////////////////////////

		//////////////////////////百度经纬度获取////////////////////////////////////
		var map = new BMap.Map("map");
		var point = new BMap.Point(103.819836, 29.352083);
		map.centerAndZoom(point,12);
		var optstion = {
			/*
			enableHighAccuracy	Boolean	是否要求浏览器获取最佳效果，同浏览器定位接口参数。默认为false
			timeout	Number	超时事件，单位为毫秒。默认为10秒
			maximumAge	Number	允许返回指定事件内的缓存结果，单位为毫秒。如果为0，则每次请求都获取最新的定位结果。默认为10分钟
			SDKLocation	Boolean	是否开启SDK辅助定位
			*/
			"enableHighAccuracy":true,
			"timeout":15,

		};
		var geolocation = new BMap.Geolocation();
		geolocation.getCurrentPosition(function(r){
			if(this.getStatus() == BMAP_STATUS_SUCCESS){
			var mk = new BMap.Marker(r.point);
			map.addOverlay(mk);
			var status = this.getStatus();
			document.getElementById("status").innerHTML = status;
			map.panTo(r.point);
			//accuracy	Number	定位精度，单位为米
			document.getElementById("jingdu").innerHTML =  r.accuracy+"米";
			document.getElementById("lng_lat_baidu").innerHTML =   r.point.lng + ", " + r.point.lat;
			document.getElementById("lng_lat_baidu2").innerHTML =   r.point.lng + ", " + r.point.lat;
			}
			else {
			alert('failed'+this.getStatus());
			}        
		},optstion);
		//////////////////////////////////////////////////////////////////////////////
				
	</script>
	<!-- ..........高德........ -->
	<script type="text/javascript">
		//初始化地图对象，加载地图
		var map = new AMap.Map('container', {
			resizeEnable: true
		});
		var options = {
			'showButton': true,//是否显示定位按钮
			'buttonPosition': 'LB',//定位按钮的位置
			/* LT LB RT RB */
			'buttonOffset': new AMap.Pixel(10, 20),//定位按钮距离对应角落的距离
			'showMarker': true,//是否显示定位点
			'markerOptions':{//自定义定位点样式，同Marker的Options
			  'offset': new AMap.Pixel(-18, -36),
			  'content':'<img src="https://a.amap.com/jsapi_demos/static/resource/img/user.png" style="width:36px;height:36px"/>'
			},
			'showCircle': true,//是否显示定位精度圈
			'circleOptions': {//定位精度圈的样式
				'strokeColor': '#0093FF',
				'noSelect': true,
				'strokeOpacity': 0.5,
				'strokeWeight': 1,
				'fillColor': '#02B0FF',
				'fillOpacity': 0.25
			}
		}
		AMap.plugin(["AMap.Geolocation"], function() {
			var geolocation = new AMap.Geolocation(options);
			map.addControl(geolocation);
			geolocation.getCurrentPosition(function(status,result){if(status=='complete'){
					onComplete(result)
				}else{
					onError(result)
				}});
			
			
	
		});
	
		//解析定位结果
		function onComplete(data) {
			document.getElementById('status').innerHTML='定位成功'
			var str = [];
			var lng_lat = data.position;
			// str.push('定位结果：' + data.position);
			str.push('定位类别：' + data.location_type);
			if(data.accuracy){
				 str.push('精度：' + data.accuracy + ' 米');
			}//如为IP精确定位结果则没有精度信息
			str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
			document.getElementById('result').innerHTML = str.join('<br>');
			document.getElementById('lng_lat_gaode').innerHTML = lng_lat;
			document.getElementById('lng_lat_gaode2').innerHTML = lng_lat;
		}
		//解析定位错误信息
		function onError(data) {
			document.getElementById('status').innerHTML='定位失败'
			document.getElementById('result').innerHTML = '失败原因排查信息:'+data.message;
		}
	</script>
	<script>
		function copyTextbaidu() {
		  	var text = document.querySelector("#lng_lat_baidu").textContent;
		 	//var text = "要复制的文本";
		 	navigator.clipboard.writeText(text).then(function() {
				var retext = "经纬度："+text+"已复制到剪贴板";
				alert(retext);
        	}, function(err) {
          		alert("无法复制文本: ", err);
        	});
		}
		function copyTextsys() {
			var text = document.querySelector("#lng_lat_sys").textContent;
			//var text = "要复制的文本";
			navigator.clipboard.writeText(text).then(function() {
				var retext = "经纬度："+text+"已复制到剪贴板";
				alert(retext);
        	}, function(err) {
          		alert("无法复制文本: ", err);
        	});
		}
		function copyTextgaode() {
			var text = document.querySelector("#lng_lat_gaode").textContent;
			//var text = "要复制的文本";
			navigator.clipboard.writeText(text).then(function() {
				var retext = "经纬度："+text+"已复制到剪贴板";
				alert(retext);
        	}, function(err) {
          		alert("无法复制文本: ", err);
        	});
		}
	  </script>
	  
</html>